<!DOCTYPE html>
<html>

<head>
    <title>${data.data.name!''}作品</title>
    <meta charset="utf-8" />
    <meta name="keywords" content=" ${data.data.name!''},${data.data.name!''}作品" />
    <meta name="description" content=" ${data.data.name!''}" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link href="/static/css/common/index.css" rel="stylesheet" />
    <link href="/static/css/works/detail.css" rel="stylesheet" />
    <link href="/static/css/footer/index.css" rel="stylesheet" />
    <link href="/static/css/font/font-awesome.min.css" rel="stylesheet" />
    <link href="/static/css/owlcarousel/owlcarousel.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="/static/img/icon.png"/>

    <style>

        .works-detail-nav{
            width: 100%;
            padding-top: 10px;
            background: rgba(255,255,255,0.6);
            height: 40px;
            position: fixed;
            z-index: 10;
        }
        .works-detail-nav .back{
            width: 70px;
            height: 30px;
            display: inline-block;
            position: relative;
            margin-left: 13px;
            line-height: 30px;
            color: #000;
            font-weight: bold;
            text-align: center;
            font-size: 14px;
            padding-left: 15px;
            box-sizing: border-box;
        }

         .works-detail-nav .back:before {
             width: 10px;
             height: 10px;
             transform: rotate(-45deg);
             border-top: solid 2px #000000;
             border-left: solid 2px #000000;
             content: "";
             position: absolute;
             left: 15px;
             top: 9px;
         }
        .works-detail-product{
            background-color: #fff;
            max-width: 1600px;
            padding-top: 140px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            width: 100%;
        }
        .works-detail-product-left{
            width: 50%;
            float: left;
            padding-left: 10%;
        }
        .works-detail-product-right{
            width: 40%;
            height: 470px;
            float: right;
        }
        .works-detail-product-img{
            height: 470px;
            border: 1px solid #f7f7f7;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .works-detail-product-img-box{
            height: 80%;
        }
        .works-detail-product-img img{

            background-color: #fff;
            -webkit-filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.5));
            -moz-filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.5));
            -ms-filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.5));
            filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.5));
        }
        .works-detail-product-small-img{
            border: 1px solid #f7f7f7;
            border-top: 0px;
            height: 104px;
            padding: 10px;
        }
        .works-detail-product-small-img img{
            width: 104px;
            height: 104px;
            object-fit: cover;
            margin-right: 6px;
        }
        .works-detail-product-info{
            padding-left: 140px;
            padding-right: 60px;
            padding-top: 40px;
        }
        .works-detail-product-info-box{
            border-bottom: 1px #eee solid;
            padding: 10px 0px;
            zoom:1
        }
        .works-detail-product-info-box:after {
            display: block;
            content: '';
            clear: both;
            height: 0;
            overflow: hidden
        }
        .works-detail-product-info-box .price{
            font-size: 20px;
            font-weight: 500;
        }

        .works-detail-buy{
            margin-top: 20px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cart-btn, .buy-btn {
            width: 48%;
            height: 40px;
            line-height: 40px;
            background-color: rgb(255, 90, 95);
            ont-size: 16px;
            text-align: center;
            font-weight: bold;
            color: #fff;
            cursor: pointer;
        }
        .works-detail-product-info-des{
            font-size: 14px;
            line-height: 20px;
            height: 20px;
            text-align: left;
            color: #666;
            margin-top: 20px;
        }
        .works-info-detal{
            width: 100%;
            padding: 60px 0px;
            background-color: #f0f0f0;
            margin-top: 40px;
        }
        .works-info-detal-box{
            width:1200px;
            margin: 0 auto;

        }

        .works-info-detal-box h2{
            text-align: center;
            margin-bottom: 40px;

        }

        .works-info-detail-header {
            width: 1200px;
            text-align: center;

        }

        .works-info-detail-header p{
            margin: 10px;
            margin-bottom: 40px;
        }

        .works-info-detail-header img{
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 50%;
            display: block;
            margin: 20px auto;

        }
        .works-info-detail-bodyer{

            height: 50px;
            border-bottom: 1px #666 dotted;
            display: flex;
            align-items: center;
            justify-content: space-between;

        }
        .works-info-detail-bodyer-cols{
            width: 30%;
            height: 50px;
            line-height: 50px;
            padding: 0px 20px;
        }

        .works-scenes-box{
            width: 100vw;
            position: relative;
            height: calc(100vw * 0.5625);
            background-size: cover;
            background-repeat:  no-repeat;
        }

        .scenes-detail-items {
            width: 264px;
            height: calc(100vw * 0.5625);
            position: absolute;
            right: 0px;
            z-index: 999;
        }

        .scenes-detail-items-btn {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.6);
            width: 14px;
            padding: 10px;
            height: 44px;
            right: 250px;
            top: 50vh;
            cursor: pointer;
            text-align: center;
            font-size: 14px;
            color: #fff;
            z-index: 999;
        }

        .scenes-detail-items-box {
            width: 230px;
            padding: 10px;
            height: calc(100vw * 0.5625 - 20px);
            margin: 0px auto;
            background-color: rgba(0, 0, 0, 0.6);
            overflow: hidden;
            overflow-y: scroll;
            position: absolute;
            right: 0px;
        }


        .scenes-detail-items-box img {
            width: 100%;
            height: 120px;
            margin-bottom: 6px;
        }

        .fix-postion {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .works-info-product-list{
            width: 1200px;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-wrap: wrap;

        }
        .works-info-product-list-item {
            border-radius: 3px;
            word-spacing: normal;
            margin-right: 20px;
            width: 280px;
            height: 400px;
            overflow: hidden;
            background-color: #fff;
            margin-top: 46px;
        }
        .works-info-product-list-item img{
            width: 100%;
            height: 260px;
            object-fit: cover;
        }
        .works-info-product-list-item-info{
            padding: 12px ;

        }
        .works-info-product-list-item-info h3{
            margin-bottom: 8px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
        }
        .works-info-product-list-item-info p{
            color: #666;
        }

        .framestylebox {
            width: 100%;
            padding: 0 5px;
            box-sizing: border-box;
        }

        .framestylebox span {
            display: inline-block;
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid #eee;
            box-sizing: border-box;
            margin-right: 16px;
            margin-bottom: 10px;
            line-height: 50px;
            font-size: 14px;
            color: #666;
            text-align: center;
            cursor: pointer;
            position: relative;
        }

        .framestylebox span {
            display: inline-block;
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid #eee;
            box-sizing: border-box;
            margin-right: 16px;
            margin-bottom: 10px;
            line-height: 50px;
            font-size: 14px;
            color: #666;
            text-align: center;
            cursor: pointer;
            position: relative;
        }
        .el-choose-frame .framestylebox span {
            background-position: 15px 15px;
            background-size: 45px 45px;
            background-repeat: no-repeat;
        }

        .framestylebox span.active{
            border: 1px solid #ac2925;
        }
        .works-detail-product-info-box-pager{
            display:flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .works-detail-product-info-box-pager .btn-pager{
            padding: 6px 10px;
            border: 1px #eee solid;
            font-size: 14px;
            margin-right: 10px;
            cursor: pointer;
            color: #666;
        }

        .works-detail-product-info-box-pager .actived{
            border: 1px #ac2925 solid;
        }

        .pager-no{
            height: calc(80% - 0px);
        }
        .pager-big{
            padding: 80px;
            height: calc(80% - 160px);
        }

        .pager-medium{
            padding: 40px;
            height: calc(80% - 80px);
        }

        .pager-small{
            padding: 20px;
            height: calc(80% - 40px);
        }

        #drags-img img{
            -webkit-filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.5));
            -moz-filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.5));
            -ms-filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.5));
        }


        .pic-1 {

            border: 22px solid transparent;
            -moz-border-image: url('https://img.artshanghaifair.com/146c90c9-e3b9-4168-9c0e-e14face9e98fae5877367ba59595?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Old Firefox */
            -webkit-border-image: url('https://img.artshanghaifair.com/146c90c9-e3b9-4168-9c0e-e14face9e98fae5877367ba59595?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Safari and Chrome */
            -o-border-image: url('https://img.artshanghaifair.com/146c90c9-e3b9-4168-9c0e-e14face9e98fae5877367ba59595?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Opera */
            border-image: url('https://img.artshanghaifair.com/146c90c9-e3b9-4168-9c0e-e14face9e98fae5877367ba59595?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
        }

        .pic-2 {

            border: 22px solid transparent;
            -moz-border-image: url('https://img.artshanghaifair.com/146c90c9-e3b9-4168-9c0e-e14face9e98fae5877367ba59595?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Old Firefox */
            -webkit-border-image: url('https://img.artshanghaifair.com/146c90c9-e3b9-4168-9c0e-e14face9e98fae5877367ba59595?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Safari and Chrome */
            -o-border-image: url('https://img.artshanghaifair.com/146c90c9-e3b9-4168-9c0e-e14face9e98fae5877367ba59595?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Opera */
            border-image: url('https://img.artshanghaifair.com/146c90c9-e3b9-4168-9c0e-e14face9e98fae5877367ba59595?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
        }


        .pic-2 {

            border: 22px solid transparent;
            -moz-border-image: url('https://img.artplussh.com/9c17928e-2392-4a05-8779-f6cc2a9f275c865f223a0f606adb?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Old Firefox */
            -webkit-border-image: url('https://img.artplussh.com/9c17928e-2392-4a05-8779-f6cc2a9f275c865f223a0f606adb?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Safari and Chrome */
            -o-border-image: url('https://img.artplussh.com/9c17928e-2392-4a05-8779-f6cc2a9f275c865f223a0f606adb?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Opera */
            border-image: url('https://img.artplussh.com/9c17928e-2392-4a05-8779-f6cc2a9f275c865f223a0f606adb?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
        }

        .pic-3 {

            border: 22px solid transparent;
            -moz-border-image: url('https://img.artplussh.com/2d3fe75a-1d24-42f8-8439-0c7f72670a252b720e3a78f8fb70?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Old Firefox */
            -webkit-border-image: url('https://img.artplussh.com/2d3fe75a-1d24-42f8-8439-0c7f72670a252b720e3a78f8fb70?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Safari and Chrome */
            -o-border-image: url('https://img.artplussh.com/2d3fe75a-1d24-42f8-8439-0c7f72670a252b720e3a78f8fb70?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
            /* Opera */
            border-image: url('https://img.artplussh.com/2d3fe75a-1d24-42f8-8439-0c7f72670a252b720e3a78f8fb70?p=d2g9MTAwLTEwMA==?w=100&h=100&a=1:1') 22 22 round;
        }

        .side-bar-nav{
            width: 60px;

            background: #fff;
            -webkit-filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.3));
            -moz-filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.3));
            -ms-filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.3));
            filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.3));
            position: fixed;
            right: 0px;
            top:30%;
            z-index: 99999;
        }
        .side-bar-nav-items{
            width: 100%;
            text-align: center;
            border-bottom: 1px #eee solid;
            padding: 10px 0px;
            background: #fff;
            display: block;
            cursor: pointer;

        }
        .side-bar-nav-items img{
            width: 50%;
            display: block;
            margin: 0 auto;
        }

        .side-bar-nav-items span{
            display: block;
            text-align: center;
            font-size: 14px;
        }
    </style>

<body>
<nav class="works-detail-nav">
<#--    <a class="back" href="javascript:window.history.back(-1)">返回</a>-->
    <span style="margin-left: 10px">
                            <a href="/">艺术上海</a> ›
        <#list data.data.artists as item>


            <a href="/artist/detail?artistNo=${item.artistNo!''}" target="_blank">
                       ${item.name!'匿名艺术家'}
                    </a>
            ›

        </#list>
                            <a>${data.data.name!''}</a>
                        </span>
</nav>
    <div class="works-detail">

        <div class="works-detail-product">
                <div class="works-detail-product-left">
                        <div class="works-detail-product-img" data-magnify="gallery" data-group="g1" data-caption="${data.data.name!''}"
                             data-src="">

                            <img id="master-img" class="pager-no" src="" style="cursor: url(https://artshanghai.oss-cn-shanghai.aliyuncs.com/icon-zoom.png),auto"/>

                        </div>
                    <div class="works-detail-product-small-img">
                        <#list data.data.imageItems as item>
                            <#list item.images as itx>
                                <img class="btn-imgs-box" class="" data-src="${itx!''}"  src="${itx!''}">
                                </img>
                            </#list>
                        </#list>
                        </div>

                </div>
            <div class="works-detail-product-right">
                <div class="works-detail-product-info">
                        <h2>${data.data.name!''}</h2>

                        <#if data.data.type =='1'>
                            <div class="works-detail-product-info-box">
                                展示作品暂不支持购买
                            </div>
                        </#if>

                    <#if data.data.type =='2'>
                        <div class="works-detail-product-info-box">
                            <span class="price">¥${data.data.price!'0'}</span> <span style="padding: 2px 4px;background: #f8d348;font-size: 12px;line-height: 12px;color: #333;margin-top: 2px;">博览会</span>
                        </div>
                    </#if>



                    <#if data.data.bizValue15?? && data.data.bizValue15 !="" >
                        <div class="works-detail-product-info-box">
                           <span>${data.data.bizValue15!''}</span>
                        </div>
                    </#if>
                    <#if data.data.categoryId?? && data.data.categoryId==1>
                        <div class="works-detail-product-info-box">
                            库存：${data.data.stockNum!"0"}
                        </div>
                    </#if>
                    <div class="works-detail-product-info-box">
                        <#if (data.data.mounts?size==0)>
                                选择画框装裱：无框
                        </#if>
                        <#if (data.data.mounts?size>0)>
                            <div class="chooseframebox" style="margin-top: 10px">
                                <div class="stylebox" >

                                    <div class="framestylebox clearfix">
                                    </div>

                                </div>
                            </div>
                        </#if>
                    </div>
                    <div class="works-detail-product-info-box works-detail-product-info-box-pager">
                        <div class="btn-pager actived" data-id="no">无卡纸</div>
                        <div class="btn-pager" data-id="big">大</div>
                        <div class="btn-pager" data-id="medium">中</div>
                        <div class="btn-pager" data-id="small">小</div>
                    </div>
                    <#if data.data.type =='2'>
                    <div class="works-detail-buy">
                        <div class="cart-btn">加入购物车</div>
                        <div class="buy-btn">购买</div>
                    </div>
                    <div class="works-detail-product-info-des">
                        装裱费：<span class="mount"></span> 运费：
                        <#if data.data.freightFee??&& data.data.freightFee != 0>
                               <span>${data.data.freightFee?if_exists}</span>
                               <#else>
                               <span>包邮</span>
                        </#if>

                    </div>
                    </#if>
                </div>
            </div>
        </div>
    </div>

    <div class="works-info-detal">
        <div class="works-info-detal-box">
            <h2>艺术品信息</h2>
            <#list data.data.artists as item>
                <div class="works-info-detail-header">
                    <a href="/artist/detail?artistNo=${item.artistNo!''}" target="_blank">
                    <img src="${item.headImg}?if_exists" alt="${item.name!'匿名艺术家'}"/>
                    <strong>${item.name!'匿名艺术家'}</strong>
                    <p>查看艺术家资料</p>
                    </a>
                </div>
            </#list>


            <div class="works-info-detail-bodyer">
                <div class="works-info-detail-bodyer-cols">
                    <span>作品名称:</span> ${data.data.name!''}
                </div>
                <div class="works-info-detail-bodyer-cols">
                    <span>艺 术 家:</span>  <#list data.data.artists as item><a href="/artist/detail?artistNo=${item.artistNo!''}" target="_blank">${item.name!'匿名艺术家'}</a></#list>
                </div>
                <div class="works-info-detail-bodyer-cols">
                    <span>材  质:</span> ${data.data.bizValue12!''}
                </div>
            </div>
            <div class="works-info-detail-bodyer">
                <div class="works-info-detail-bodyer-cols">
                    <span>尺  寸:</span>
                                       ${data.data.bizValue18!''}x ${data.data.bizValue6!''}
                                        <#if data.data.bizValue5 ?? && data.data.bizValue5 != ''>
                                          x ${data.data.bizValue5}
                                            <#else>
                                        </#if>
                                       cm
                </div>
                <div class="works-info-detail-bodyer-cols">
                    <span>创作时间:</span> ${data.data.bizValue9!'无'}
                </div>
                <div class="works-info-detail-bodyer-cols">
                    <#if data.data.company??>
                    <span>艺术机构:</span> <a href="/exhibition/company?companyNo=${data.data.company.companyNo!''}" target="_blank"> ${data.data.company.name!''}</a>
                    </#if>
                </div>
                </div>
            </div>
        </div>
    </div>
<div class="works-info-detal" style="background: #fff">
        <div class="works-info-detal-box" style="width: 600px">
        ${data.data.introduction!''}
        </div>
    </div>

    <div class="works-info-detal" style="background: #fff">
        <div class="works-info-detal-box">
            <h2 style="margin-bottom: 0px">适应生活场景

            </h2>
        </div>
    </div>

    <div class="works-scenes-box" id="scenes-detail" style="">
        <div class="fix-postion" id="drags-img" style="position: absolute; cursor: move; left: 34%; top: 19.5556%; height: 31.7778%; width: 16.625%;">
            <img style="width: 100%" src="${data.data.image!''}">
        </div>
        <div class="scenes-detail-items">
            <div class="scenes-detail-items-btn">更多</div>
            <div class="scenes-detail-items-box">
            </div>
        </div>
    </div>
<div class="side-bar-nav">
    <a class="side-bar-nav-items" id="goTop">
        <img src="/static/img/icon-top.png"/>
        <span>返回顶部</span>
    </a>
    <a class="side-bar-nav-items" onclick="checkLogin('/user/cart')">
        <img src="/static/img/icon-cart.png"/>
        <span>购物车</span>
    </a>
    <a class="side-bar-nav-items" onclick="checkLogin('/user/order')">
        <img src="/static/img/icon-order.png"/>
        <span>订单</span>
    </a>
    <a class="side-bar-nav-items" id="chartBtn" >
        <img src="/static/img/icon-client.png"/>
        <span>客服</span>
    </a>
    <a class="side-bar-nav-items" onclick="checkLogin('/user/history')">
        <img src="/static/img/icon-history.png"/>
        <span>足迹</span>
    </a>
</div>


    <div class="works-info-detal" style="margin-top: 0px">
        <div class="works-info-detal-box">
            <h2 style="margin-bottom: 0px">可能你也喜欢
            </h2>
            <div class="works-info-product-list">
                <#list pMap.data as item>

                    <div class="works-info-product-list-item">
                        <a  href="/works/detail?productNo=${item.productNo!''}" target="_blank">
                        <img src="${item.image!''}"/>
                        </a>
                        <div class="works-info-product-list-item-info">
                            <h3> ${item.name!''}</h3>
                            <#if item.artists??>
                                <p> <#list item.artists as itx>
                                        <a href="/artist/detail?artistNo=${itx.artistNo!''}" target="_blank">${itx.name!'匿名艺术家'}</a>
                                    </#list></p>
                            </#if>

                            <p>${item.bizValue18?if_exists} x ${item.bizValue6?if_exists}
                            <#if data.data.bizValue5 ?? && data.data.bizValue5 != ''>
                              x ${data.data.bizValue5}
                              <#else>
                            </#if>cm</p>
                            <#if item.price != 0 >
                                <p class="price">¥${item.price?if_exists}</p>
                            </#if>
                        </div>
                    </div>

                </#list>

            </div>
        </div>
    </div>



<script src="/static/js/jquery-3.6.4.min.js"></script>
    <script src="/static/js/jquery-migrate.min.js"></script>

<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/hty-photo/preview-photo.js"></script>
<script src="/static/js/jquery.rotate.min.js"></script>
<script src="/static/js/drag.js"></script>
<script src="/static/js/owlcarousel/owl.carousel.js"></script>
<script>

    //return;

    var isOpen = false;
    var curr_menus = 'goods-detail';
    var curr_wall_index = 0;

    var productNo = '${data.data.productNo!''}';
    var productImage = '${data.data.image!''}';
    var productName = '${data.data.name!''}';

    var skuNo = '${data.data.productNo!''}';
    var picPrice = null;
    var picNo = null;

    var plist = localStorage.getItem('historyP')
    if(plist){
        var list = JSON.parse(plist);
        if(list && list.length>0){
            debugger
            var isExisted  = false;
            for(var i=0; i<list.length; i++){
                if(list[i].productNo == productNo){
                    isExisted = true;
                    break
                }
            }
            if(!isExisted){
                var obj ={
                    productNo: productNo,
                    productImage: productImage,
                    productName: productName
                }
                list.push(obj)
            }
        }
    }else{
        var list = [];
        var obj ={
            productNo: productNo,
            productImage: productImage,
            productName: productName
        }
        list.push(obj)

    }
    localStorage.setItem('historyP',JSON.stringify(list))


    var selPicList =  [<#list data.data.mounts as item>
        <#if item_has_next>
        '${item}',
        <#else>
        '${item}'
        </#if>
    </#list>
            ]



    var currlist =[]

    var wallList = [

    ]
    $(function () {
        $(".pic-detail").hide();

        $(".buy-btn").click(function () {

            var token = getToken();
            if(token){
                if(picNo!==null){
                    window.location.href = '/order/create?productNo='+productNo+'&type=simple&picCode='+picNo+'&picPrice='+picPrice;
                }else{
                    window.location.href = '/order/create?productNo='+productNo+'&type=simple'
                }

            }else {
                relogin(window.location)

            }

            // if(picNo!==null){
            //     window.location.href = '/order/create?productNo='+productNo+'&type=simple&picCode='+picNo+'&picPrice='+picPrice;
            // }else{
            //     window.location.href = '/order/create?productNo='+productNo+'&type=simple'
            // }
        })

        $(".cart-btn").click(function () {
            var token = getToken();
            if(token){
                var param = {
                    frameNo:picNo,
                    productNo: productNo,
                    skuNo: productNo,
                    quantity: 1,
                }
                $.ajax({
                    type: "POST",
                    url: baseUrl+"api/shop-center/app/mall/cart/save",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    headers: {
                        'lbv': '1.0',
                        'tenant' : 'PTC',
                        'token':  getToken(),
                    },
                    data: JSON.stringify(param),
                    success: function (res) {
                        debugger;
                        if(res && res.code && res.code=='0'){
                            alert('添加成功');
                        }
                        else{
                        alert(res.msg);
                        if(res.code=='-3'){
                            relogin(window.location.href);
                        }
                        
                    }
                    },
                    error: function (res) {

                    }
                });

            }else {
                relogin(window.location)

            }
        })

        $(".btn-pager").click(function () {
            $(".btn-pager").removeClass('actived');
            $(this).addClass('actived');
            var t = $(this).attr('data-id')
            $('#master-img').removeClass('pager-no');
            $('#master-img').removeClass('pager-big');
            $('#master-img').removeClass('pager-small');
            $('#master-img').removeClass('pager-medium');
            $('#master-img').addClass('pager-'+t);

        })

        loadWallData();
        if(selPicList.length>0) {
            loadPicBroderData();
        }
        var idx = 0;
        $(".btn-imgs-box").each(function () {
           if(idx===0){
               $(this).addClass("active");
               $(".works-detail-product-img").attr('data-src',$(this).attr('data-src'));
               $("#master-img").attr('src',$(this).attr('data-src'));
           }
        })
        //
        $('.btn-imgs-box').click(function(){
            $(this).addClass("active");
            $(".works-detail-product-img").attr('data-src',$(this).attr('data-src'));
            $("#master-img").attr('src',$(this).attr('data-src'));
        })

        $(".scenes-detail-items-btn").click(function () {
            if (!isOpen) {
                $(".scenes-detail-items").animate({ right: '-254px' }, 300, function () {
                    isOpen = !isOpen
                });
            } else {
                $(".scenes-detail-items").animate({ right: '0px' }, 300, function () {
                    isOpen = !isOpen
                });
            }
        });

        $('[data-magnify]').Magnify({
            Toolbar: [
                'prev',
                'next',
                'rotateLeft',
                'rotateRight',
                'zoomIn',
                'actualSize',
                'zoomOut'
            ],
            keyboard: false,
            draggable: false,
            movable: true,
            title: false,

            modalSize: [$(window).width(), $(window).height()],
            beforeOpen: function (obj, data) {
                console.log('beforeOpen')
            },
            opened: function (obj, data) {
                console.log('opened')

            },
            beforeClose: function (obj, data) {
                console.log('beforeClose')
            },
            closed: function (obj, data) {
                console.log('closed')
            },
            beforeChange: function (obj, data) {
                console.log('beforeChange')
            },
            changed: function (obj, data) {
                console.log('changed')
            }
        });

        $('#drags-img').myDrag({
            randomPosition: false,
            direction: 'all',
            handler: false
        });

    })

    //初始化场景
    function initWallList() {

        for (var i = 0; i < wallList.length; i++) {
            $(".scenes-detail-items-box").append('<img src="' + wallList[i].img + '" data-index="' + i + '">')
        }

        if (wallList.length > 0) {
            changeWallByIndex(0);
        }

        $(".scenes-detail-items-box img").bind('click', function () {
            var index = $(this).attr('data-index');
            //alert(wallList[index].img)
            changeWallByIndex(index);
            curr_wall_index = index;
        })

        // $(".leftbtn").click(function () {
        //     if (curr_wall_index <= 0) {
        //         return;
        //     }
        //     curr_wall_index = --curr_wall_index;
        //     changeWallByIndex(curr_wall_index);
        // })
        //
        // $(".rightbtn").click(function () {
        //     if (curr_wall_index >= wallList.lenght) {
        //         return;
        //     }
        //     curr_wall_index = ++curr_wall_index;
        //     changeWallByIndex(curr_wall_index);
        // })
    }

    function loadWallData(){
        $.ajax({
            type: "GET",
            url: baseUrl+"api/basic-center/app/base/parameter/get?key=scene",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (res) {
               if(res && res.code && res.code=='0' && res.data){
                   wallList = JSON.parse(res.data);
                   initWallList();
               }

            },
            error: function (res) {

            }
        });
    }

    function loadPicBroderData() {

        $.ajax({
            type: "GET",
            url: baseUrl+"api/basic-center/app/base/parameter/get?key=pictureBorder",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (res) {
                if(res && res.code && res.code=='0' && res.data){
                    try{
                        var picBorderList = JSON.parse(res.data);
                        if(picBorderList.length>0){
                            for(var i=0; i<picBorderList.length; i++){
                                for(var j=0; j<selPicList.length; j++){
                                    if(selPicList[j]===picBorderList[i].code){
                                        currlist.push(picBorderList[j])
                                    }
                                }
                            }
                            if(currlist.length>0){
                                $(".framestylebox").append('<span class="framestyle active">无框</span>')
                                for(var i=0; i<currlist.length; i++){
                                    $('.framestylebox').append('<span class="" data-price="'+currlist[i].price+'" data-pic-code="'+currlist[i].code+'" style="background-image: url('+currlist[i].image+');"></span>')
                                }
                            }
                        }
                        $('.framestylebox span').click(function(){
                            $('.framestylebox span').removeClass('active');
                            $('#master-img').removeClass(picNo)
                            $(this).addClass('active');
                            if($(this).attr('data-price')){
                                $('.mount').html('¥'+$(this).attr('data-price'));
                                picPrice = $(this).attr('data-price');
                                picNo =  $(this).attr('data-pic-code');
                                $('#master-img').addClass(picNo)
                                $('#drags-img img').attr('class','')
                                $('#drags-img img').addClass(picNo)
                            }else{
                                $('.mount').html('免费');
                                picPrice = 0;
                            }
                        })
                    }catch (e) {

                    }

                }

            },
            error: function (res) {

            }
        });

    }

    function changeWallByIndex(index) {
        $("#scenes-detail").css({ backgroundImage: "url(" + wallList[index].img + ")" })
        $("#drags-img").css({ left: wallList[index].left+"%", top: wallList[index].top+"%",height: wallList[index].height+"%", width: wallList[index].width+"%" })
    }

    function resetBtnState() {
        $(".topbtn").removeClass("active")
    }

</script>

<script>

    (function(y, un, q, u, e) {
        window[un] =
            window[un] ||
            function(y) {
                window[un].company_id = window[un].company_id || y;

            };
        u = document.createElement("script");
        u.src = q + "?v=" + new Date().getUTCDate();
        u.async = true;
        e = document.getElementsByTagName("script")[0];
        e.parentNode.insertBefore(u, e);
    })(window,"_YUNQUE","//dist.yunque360.com/bundle.js");
    _YUNQUE("cjmpk62q5i7lau");
</script>

</body>

</html>